<template>
  <div>
    <header v-if="showHeaderFooter" class="fixed top-0 w-full z-50">
      <div class="text-white text-sm bg-primary-300"> 
        <div class="h-12 bg-primary-100 flex items-center">
          <div class="w-full max-w-[1440px] mx-auto px-4">
            <div class="flex justify-between">
              <!-- 左侧 Logo 和导航 -->
              <div class="flex items-center">
                <RouterLink to="/">
                  <img src="@/assets/images/logo.png" class="h-[39px]">
                </RouterLink>
                
                <!-- 分类导航组件 -->
                <Category />
              </div>

              <!-- 右侧搜索和登录 -->
              <div class="flex items-center space-x-2">
                <!-- 搜索框 -->
                <div class="relative">
                  <input 
                    v-model="searchQuery"
                    type="text" 
                    placeholder="请输入关键词" 
                    @keyup.enter="searchMovies"
                    class="h-9 rounded bg-primary-700 border border-gray-600 placeholder-gray-400 w-[180px] px-2 focus:outline-none"
                  >
                  <button 
                    @click="searchMovies"
                    class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </button>
                </div>

                <!-- 登录注册 -->
                <div v-if="isLoggedIn()" @click="toggleMenu" id="userinfo" class="flex relative cursor-pointer items-center justify-center rounded border border-solid text-white text-lg h-9 text-center">
                  <div id="username" class="px-2">{{ getUsername() }}</div>
                  <div class="pr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div v-show="showMenu" id="userinfo_menu" class="absolute top-[40px] w-32 transition ease-in-out delay-150 z-50">
                    <ul class="bg-primary-700 py-2 px-4 text-sm">
                      <li class="plx-2 py-2">
                        <a href="/personal">个人中心</a>
                      </li>
                      <li class="plx-2 py-2">
                        <a href="/collect">我的收藏</a>
                      </li>
                      <li class="plx-2 py-2">
                        <router-link to="/" v-on:click.prevent="logout">退出</router-link>
                      </li>
                    </ul>
                  </div>
                </div>
                <div v-else class="text-white flex-shrink-0 pr-2">
                  <a href="/login/">登录</a> /
                  <a href="/register/">注册</a>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <div class="bg-primary-300 min-h-screen">
      <RouterView />
    </div>

    <!-- 页脚 -->
    <footer v-if="showHeaderFooter" class="fixed bottom-0 w-full bg-primary-100 py-4 text-center">
      <p class="text-gray-300">2024© 大熊课堂 All rights reserved.</p>
    </footer>
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Category from '@/components/movie/Category.vue'
import { isLoggedIn, getUsername, logout, isAccessTokenExpired, handleRefreshAccessToken } from '@/utils/auth'

const router = useRouter()
const route = useRoute()

// 初始化搜索词
const searchQuery = ref(route.query.movie_name || '')

const searchMovies = () => {
  router.push({ 
    path: '/',
    query: searchQuery.value ? { movie_name: searchQuery.value } : {}
  })
} 

// 根据当前路由决定是否显示 header 和 footer
const showHeaderFooter = computed(() => {
  return route.name !== 'Register' && route.name !== 'Login'
})

// 用户菜单相关
const showMenu = ref(false)

const toggleMenu = () => {
  showMenu.value = !showMenu.value
}

// Token 刷新相关
const checkTokenAndRefresh = async () => {
  if (isAccessTokenExpired()) {
    const refreshed = await handleRefreshAccessToken()
    if (!refreshed) {
      console.error('Token expired and refresh failed')
      logout()
      router.push('/login')
    }
  }
}

onMounted(() => {
  if (isLoggedIn()) {
    checkTokenAndRefresh()
  }
})
</script>

<style scoped>
.dropdown-menu {
  position: relative;
}

/* 添加过渡动画 */
.dropdown-menu > div > svg {
  transition: transform 0.2s ease-in-out;
}
</style>
